<template>
    <u-input v-bind="Object.assign({}, $attrs, $props)"
        @update:modelValue="$emit('input', $event), $emit('update:modelValue', $event)" :type="type">
        <template #prefix>
            <view class="l-input-label">
                {{ label }}
                <slot name="prefix"></slot>
            </view>
        </template>
        <template #suffix>
            <template v-if="props.type == 'password'">
                <u-icon name="eye-fill" v-if="showText" @tap="showText = false"></u-icon>
                <u-icon name="eye-off" v-else @tap="showText = true"></u-icon>
            </template>
            <slot name="suffix">{{ suffix }}</slot>
        </template>
    </u-input>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';

let props = withDefaults(defineProps<{
    placeholder?: string,
    type?: string,
    label?: string,
    suffix?: string
}>(), {
    placeholder: '请输入',
    type: 'text',
});

let showText = ref(false)
let type = computed(() => {
    if (props.type == 'password') {
        return showText.value ? 'text' : props.type;
    } else {
        return props.type;
    }
})
</script>
<style lang="scss">
l-input {
    @apply block;
}
</style>